import 'package:twelve_animals/global.dart';
import 'package:twelve_animals/main_manager.dart';
import 'package:twelve_animals/modal/constellation_modal.dart';
import 'package:twelve_animals/pages/match_detail.dart';
import 'package:twelve_animals/widgets/info.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MatchPage extends StatefulWidget {
  MatchPage({Key key}) : super(key: key);
  @override
  _MatchPageState createState() => _MatchPageState();
}

class _MatchPageState extends State<MatchPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    MainManager _mainManager = Provider.of<MainManager>(context);
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(color: Global.backgroundColor),
      child: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: Row(
              children: [
                Container(
                  width: MediaQuery.of(context).size.width / 2,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/sx_bg.png"),
                      repeat: ImageRepeat.repeat,
                      fit: BoxFit.none,
                    ),
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color(0xFFd1ebfd),
                        Color(0xFFffffff),
                      ],
                    ),
                  ),
                  child: Info(
                    sex: 1,
                    onTap: () {
                      ConstellationModal.show(
                        context: context,
                        constellation: _mainManager.maleData,
                        onChange: (data) {
                          _mainManager.changeMaleData(data);
                        },
                      );
                    },
                    constellation: _mainManager.maleData,
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width / 2,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/sx_bg.png"),
                      repeat: ImageRepeat.repeat,
                      fit: BoxFit.none,
                    ),
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color(0xFFffc5c5),
                        Color(0xFFffffff),
                      ],
                    ),
                  ),
                  child: Info(
                    sex: 0,
                    onTap: () {
                      ConstellationModal.show(
                        context: context,
                        constellation: _mainManager.femaleData,
                        onChange: (data) {
                          _mainManager.changeFeMaleData(data);
                        },
                      );
                    },
                    constellation: _mainManager.femaleData,
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 100,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => MatchDetail(
                          male: _mainManager.maleData['id'],
                          female: _mainManager.femaleData['id'],
                        ),
                      ),
                    );
                  },
                  child: Container(
                    padding: EdgeInsets.fromLTRB(30, 8, 30, 8),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Global.mainColor.withOpacity(0.5),
                          Global.mainColor,
                        ],
                      ),
                      borderRadius: BorderRadius.circular(100),
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xFF000000).withOpacity(0.1),
                          offset: Offset(0, 5),
                          blurRadius: 5,
                          spreadRadius: 1,
                        )
                      ],
                    ),
                    child: Center(
                      child: Text(
                        "生肖速配",
                        style: TextStyle(
                          color: Global.backgroundColor,
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
